<template>
  <view class="input-field">
    <view class="input-label">
      <text v-if="required" class="required">*</text>
      {{ label }}
    </view>
    <view class="input-container" :class="{ 'error': showError }">
      <template v-if="multiline">
        <textarea class="uni-textarea" :value="modelValue" :placeholder="placeholder" :maxlength="30000" @input="handleInput" />
      </template>
      <template v-else>
        <input class="uni-input" :value="modelValue" :maxlength="3000" :placeholder="placeholder" @input="handleInput" :type="type" />
      </template>
      <image v-if="modelValue" class="clear-icon" :class="{ multiline }" src="/static/icons/close.svg"
        @click="handleClear" />
    </view>
    <text v-if="showError" class="error-text">{{ errorMessage }}</text>
  </view>
</template>

<script setup>
import { computed, ref, watch, nextTick } from 'vue'

const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  multiline: {
    type: Boolean,
    default: false
  },
  label: {
    type: String,
    default: '输入'
  },
  required: {
    type: Boolean,
    default: false
  },
  placeholder: {
    type: String,
    default: '请输入'
  },
  type: {
    type: String,
    default: 'text'
  },
  reg: {
    type: RegExp,
    default: null
  },
  regErrorMessage: {
    type: String,
    default: '输入格式不正确'
  }
})

const emit = defineEmits(['update:modelValue'])

const touched = ref(false)
const errorMessage = ref('')

// 校验方法
const validate = () => {
  touched.value = true
  if (props.required && !props.modelValue) {
    errorMessage.value = `请输入${props.label}`
    return false
  }
  if (props.reg && props.modelValue && !props.reg.test(props.modelValue)) {
    errorMessage.value = props.regErrorMessage
    return false
  }
  errorMessage.value = ''
  return true
}

const showError = computed(() => touched.value && errorMessage.value)

const handleInput = (e) => {
  touched.value = true
  const newValue = e.detail.value
  emit('update:modelValue', newValue)
  // 添加 nextTick 确保值更新后再验证
  nextTick(() => {
    validate()
  })
}

// 添加 watch 监听值变化
watch(
  () => props.modelValue,
  (newVal) => {
    if (touched.value) {
      validate()
    }
  }
)

const handleClear = () => {
  emit('update:modelValue', '')
  validate()
}

defineExpose({
  validate
})
</script>

<style lang="scss" scoped>
.input-field {
  width: 100%;
  box-sizing: border-box;
}

.input-label {
  margin-bottom: 12rpx;
}

.input-container {
  position: relative;
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 8rpx;
  padding: 20rpx;
  box-sizing: border-box;
}

.clear-icon {
  position: absolute;
  right: 20rpx;
  top: 50%;
  transform: translateY(-50%);
  width: 32rpx;
  height: 32rpx;
  padding: 10rpx;

  &.multiline {
    top: auto;
    bottom: 20rpx;
    transform: none;
  }
}

.uni-input {
  width: calc(100% - 40rpx);
  font-size: 28rpx;
  color: #333;
}

.label {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
}

.input-container.error {
  border-color: #ff4d4f;
}

.error-text {
  font-size: 24rpx;
  color: #ff4d4f;
  margin-top: 8rpx;
}

.required {
  color: #ff4d4f;
  margin-right: 4rpx;
}

.uni-textarea {
  width: calc(100% - 40rpx);
  font-size: 28rpx;
  color: #333;
  min-height: 120rpx;
  line-height: 1.5;
}
</style>